<script lang="ts" setup>
import BgVue2 from './BgVue2.vue'
</script>
<template>
  <BgVue2 bgColor="#61b4f7">
    <template #topImg> </template>
    <template #bottomImg>
      <img src="@/assets/imgV2/BlockchainGame-bg.png" />
    </template>
    <slot></slot>
  </BgVue2>
</template>

<style lang="less" scoped>
.BgVue2 {
  margin-top: -62px;

  & > :deep(.topImg) {
    height: (293px/2);
    background-color: #60b3f7;
  }
  & > :deep(.content) {
    min-height: 226px;

    & > * {
      position: relative;
      z-index: 1;
    }
  }

  & > :deep(.bottomImg) {
    position: relative;
    // height: (1040px/2);

    min-height: calc(100vh - 151px);

    background-image: linear-gradient(0deg, #177dcf 0%, #5eb3f6 100%);
    img {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
